<template>
  <div class="liebiao_box">
    <p class="liebiao_p">列表项</p>
    <ul class="liebiao_ul">
        <!-- 像是列表进入他自己的详情页，首页应该是路有跳转，跳转之后 他的结构本来是<li>标签。所以使用tag属性改为li标签。:to意思是跳转到哪里。下面是跳转到详情页。 -->
      <router-link tag='li' :to="'/xiangqing/'+item.id" class="liebiao_li" v-for="(item,index) of liebiaoList" :key="index">
        <!-- <li class="liebiao_li" v-for="(item,index) of liebiaoList" :key="index"> -->
          <i class="liebiao_li_left">
            <img :src="item.imgUrl" alt />
          </i>
          <div class="liebiao_li_right">
            <h3 class="liebiao_li_right_h">{{item.title}}</h3>
            <p class="liebiao_li_right_h">{{item.titlep}}</p>
            <p class="liebiao_li_right_h">{{item.titlebtn}}</p>
            <button class="liebiao_li_right_h" style="color:red;">{{item.titlepp}}</button>
          </div>
        <!-- </li> -->
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  // props就是接受父组件传过来的数据，所以下面的data数据就没有用了
  props: {
    liebiaoList: Array
  },
  data() {
    return {
      // liebiaoList:[
      //     {
      //         id:'01',
      //         imgUrl:'https://imgs.qunarzz.com/vs_ceph_vs_tts/709b13cf-820e-4139-999f-498ad9045567.jpg_r_390x260x90_49b4fd90.jpg',
      //         title:'哈哈哈',
      //         titlep:'大数据框架房',
      //         titlepp:'大煞风景',
      //         titlebtn:'电视剧'
      //     },
      //      {
      //         id:'02',
      //         imgUrl:'https://imgs.qunarzz.com/vs_ceph_vs_tts/709b13cf-820e-4139-999f-498ad9045567.jpg_r_390x260x90_49b4fd90.jpg',
      //         title:'哈哈哈',
      //         titlep:'大数据框架房',
      //         titlepp:'大煞风景',
      //         titlebtn:'电视剧'
      //     },
      //      {
      //         id:'03',
      //        imgUrl:'https://imgs.qunarzz.com/vs_ceph_vs_tts/709b13cf-820e-4139-999f-498ad9045567.jpg_r_390x260x90_49b4fd90.jpg',
      //         title:'哈哈哈',
      //         titlep:'大数据框架房',
      //         titlepp:'大煞风景',
      //         titlebtn:'电视剧'
      //     },
      //     {
      //         id:'04',
      //         imgUrl:'https://imgs.qunarzz.com/vs_ceph_vs_tts/709b13cf-820e-4139-999f-498ad9045567.jpg_r_390x260x90_49b4fd90.jpg',
      //         title:'哈哈哈',
      //         titlep:'大数据框架房',
      //         titlepp:'大煞风景',
      //         titlebtn:'电视剧'
      //     },
      //     {
      //         id:'05',
      //         imgUrl:'https://imgs.qunarzz.com/vs_ceph_vs_tts/709b13cf-820e-4139-999f-498ad9045567.jpg_r_390x260x90_49b4fd90.jpg',
      //         title:'哈哈哈',
      //         titlep:'大数据框架房',
      //         titlepp:'大煞风景',
      //         titlebtn:'电视剧'
      //     },
      //     {
      //         id:'06',
      //          imgUrl:'https://imgs.qunarzz.com/vs_ceph_vs_tts/709b13cf-820e-4139-999f-498ad9045567.jpg_r_390x260x90_49b4fd90.jpg',
      //         title:'哈哈哈',
      //         titlep:'大数据框架房',
      //         titlepp:'大煞风景',
      //         titlebtn:'电视剧'
      //     },
      // ]
    };
  }
};
</script>

<style lang="stylus" scoped>
@import '~styles/varbles';
@import '~styles/common';

.liebiao_box {
  .liebiao_p {
    padding: 0.3rem 0.3rem;
    background-color: $bgColor;
    color: #fff;
    font-size: 0.35rem;
  }

  .liebiao_ul {
    .liebiao_li {
      background: red;
      padding: 0.3rem;
      display: flex;
    }

    .liebiao_li_left img {
      display: block;
      width: 1.35rem;
      height: 1.35rem;
    }

    .liebiao_li_right {
      flex: 1;
      min-width: 0;
    }

    .liebiao_li_right_h {
      color: #fff;
      font-size: 0.35rem;
      margin-left: 0.2rem;
      danhang();
    }
  }
}
</style>